<!-- 设备管理 -->
<template>
  <div class=''>
    <el-upload :action="reqUrl" list-type="picture-card" :http-request="uploadSectionFile"
      :on-remove="handleRemove" >
      <i class="el-icon-plus"></i>
    </el-upload>
     <el-image
      style="width: 100px; height: 100px"
      :src="'https://gitee.com/Delicate_gray/bai/raw/master/img/20220307/1646644022832_ee937e36-68a8-4692-a03d-c82b4b1b6e0c.png'"
      :fit="fit"></el-image>
  </div>
</template>

<script>

  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        reqUrl: "/uploadImg",
        imgUrl:""
      };
    },
    //方法集合
    methods: {
      //移除之后删除图片
      handleRemove(file, fileList) {
        //访问后端删除图片
        this.$axios.delete("/delImg",{
          params:{
            imgPath:this.imgUrl,
          }
        })
          .then((result) => {
            if(!result.success){
              this.$message.error(result.message);
            }
          })
      },
      //以下是重点，覆盖默认上传方法
      uploadSectionFile(params) {
        // console.log(params)
        let formData = new FormData();
        formData.append(params.filename, params.file);
        this.$axios.post(params.action, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
          .then((result) => {
            this.imgUrl = result.data;
          })
      },
    },
    created() {

    },
    mounted() {

    },
  }
</script>
<style scoped>

</style>
